<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
    <style>
        body,
        html {
            height: 100%;
            box-sizing: border-box;
            background: #fff;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card layui-form">
            <div class="layui-form-item" style="padding-left:15px;">
                <label>订单编号</label>
                <div class="layui-inline" style="width:200px;">
                    <input type="text" class="layui-input" style="width:200px;" name="OrderNo" autocomplete="off"
                        placeholder="请输入订单号" />
                </div>
                <label>订单状态</label>
                <div class="layui-inline" style="width:120px;">
                    <select name="OrderStatus">
                    </select>
                </div>
                <label>订单日期</label>
                <div class="layui-inline" style="width:200px;">
                    <input type="text" readonly="readonly" name="OrderDate" class="layui-input" id="OrderDate"
                        style="width:200px;" />
                </div>
                <div class="layui-inline" style="width:120px;">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-list-submit"
                        id="btnSearch">
                        <i class="layui-icon layuiadmin-button-btn layui-icon-search"></i>查询
                    </button>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="edit">
        {{# if(d.OrderStatus==1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="sendgoods"><i class="layui-icon  layui-icon-edit"></i>发货</a>
        {{# } }}
        <a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon  layui-icon-edit"></i>查看详情</a>
    </script>
</body>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(["index", "form", "table", "jquery", "layer", "tree", "element", "upload", 'laydate'], function (exports) {
        var table = layui.table;
        var layer = layui.layer;
        var admin = layui.admin;
        var $ = layui.$;
        var tree = layui.tree;
        var form = layui.form;
        var laydate = layui.laydate;
        var oper = {
            data: {
                sellistinfo: {},//选中列表行 
                table: null,
                tabledata: [],
                listmodel: {},//列表行模型
                orderstatus: [],
                //订单状态 0 待付款 1待发货 2待收货 3待评价 4已完成 5取消 6退款中 7已退款
                paytype: [],//支付方式：1微信 2 支付宝，3零钱支付 4组合支付
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20200616102057595/shop/?view=layui&fun=" + fun;
                return url;
            },
            init: function () {
                var self = this;
                Promise.all([self.GetDict(8140), self.GetDict(8141)]).then(res => {
                    self.data.orderstatus = res[0].data.appbasedict;
                    self.data.paytype = res[1].data.appbasedict;
                    self.initSelect(self.data.orderstatus, "OrderStatus");
                    form.render("select");
                    self.tableLoad();
                })
                laydate.render({
                    elem: '#OrderDate'
                    , range: true //或 range: '~' 来自定义分割字符 
                    , max: this.formatDate(new Date())
                });
                self.initEvent();
            },
            formatDate(date) {
                var y = date.getFullYear();
                console.log(y);
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            initSelect: function (data, name) {
                var appendHtml = '';
                appendHtml = "<option value='-1'>全部</option>";
                data.forEach(a => {
                    appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
                })
                $("[name=" + name + "]").html(appendHtml);
            },
            //表数据加载
            tableLoad: function () {
                var self = this;
                var orderStatus = $("[name='OrderStatus']").val();
                var orderNo = $("[name='OrderNo']").val();
                var orderDate = $("[name='OrderDate']").val();
                self.data.classTable = table.render({
                    elem: "#dataTable",
                    where: {
                        orderStatus: orderStatus,
                        orderNo: orderNo,
                        sdate: orderDate.split(' - ')[0],
                        edate: orderDate.split(' - ')[1],
                    },
                    url: self.getbaseurl("Mall.GetBackStageOrderList"),
                    height: "full-100",
                    size: '10',
                    page: true, //开启分页 
                    loading: true,
                    cols: [[
                        { field: 'OrderNo', title: '订单编号', width: '15%', fixed: 'left' },
                        { field: 'TradeNo', title: '交易流水号', width: '15%' },
                        {
                            field: 'PayType', title: '支付类型', width: '8%', templet: function (d) {
                                var filter = self.data.paytype.filter(a => { return a.Code == d.PayType; });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return "";
                            }
                        },
                        {
                            field: 'OrderStatus', title: '订单状态', width: '8%', templet: function (d) {
                                var filter = self.data.orderstatus.filter(a => { return a.Code == d.OrderStatus; });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return "";
                            }
                        },
                        { field: 'TotalFee', title: '订单金额', width: '10%' },
                        { field: 'NickName', title: '买家昵称', width: '10%' },
                        { field: 'TelPhone', title: '卖家电话', width: '10%' },
                        {
                            field: 'TelPhone', title: '商品信息', width: '10%', templet: function (d) {
                                return d.GoodsName.substring(0, d.GoodsName.length - 1);
                            }
                        },
                        { field: 'TotalFee', title: '订单金额', width: '10%' },
                        {
                            field: 'CreateTime', title: '下单时间', width: '15%', templet: function (d) {
                                return (d.CreateTime || "").substring(0, 19);
                            }
                        },
                        {
                            field: 'TimeEnd', title: '支付时间', width: '15%', templet: function (d) {
                                return (d.TimeEnd || "").substring(0, 19);
                            }
                        },
                        {
                            field: 'DeliveryTime', title: '发货时间', width: '15%', templet: function (d) {
                                return (d.DeliveryTime || "").substring(0, 19);
                            }
                        },
                        { field: 'operation', title: '操作', toolbar: '#edit', fixed: 'right', width: '20%' }
                    ]]
                    , done: function (res) {

                    }
                });
            },
            //页面加载
            initEvent: function () {
                var self = this;
                //订单详情查看，发货
                table.on('tool(dataTable)', function (obj) {
                    var data = obj.data;//当前行数据 
                    window.sellistinfo = data;
                    window.orderstatus = self.data.orderstatus;
                    window.paytype = self.data.paytype;
                    switch (obj.event) {
                        case 'sendgoods':
                            self.openEdit("订单发货");
                            break;
                        case 'detail':
                            self.openDetail(data.OrderNo + '-详情');
                            break;
                    }
                });
                //查询列表
                form.on("submit(LAY-list-submit)", function (data) {
                    self.tableLoad();
                });
            },
            //打开编辑器
            openEdit: function (title) {
                var self = this;
                layer.open({
                    type: 2
                    , title: title
                    , content: "edit.html"
                    , area: ['50%', '100%']
                    , btn: ['发货', '取消']
                    , resize: false
                    , success: function (layero, index) {

                    }
                    , btn2: function (index, layero) {

                    }
                    , cancel: function () {

                    }
                    , yes: function (index, layero) {
                        var a = getResult()
                        if (a.LogisticsCompany == '全部') {
                            layer.msg("请选择快递公司");
                            return;
                        }
                        if (a.LogisticsNo == "") {
                            layer.msg("快递单号不能为空");
                            return;
                        }
                        layer.confirm('确认发货吗？', { icon: 3, title: '提示' }, function (index2) {
                            if (a != null) {
                                layer.msg('正在发货，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                                self.sendgoods(a, () => {

                                    self.tableLoad();
                                    layer.close(index2);
                                    layer.close(index);

                                })
                            }
                        });
                    }
                });
            },
            //打开编辑器
            openDetail: function (title) {
                var self = this;
                layer.open({
                    type: 2
                    , title: title
                    , content: "detail.html"
                    , area: ['50%', '100%']
                    , resize: false
                    , success: function (layero, index) {

                    }
                    , btn2: function (index, layero) {

                    }
                    , cancel: function () {

                    }
                    , yes: function (index, layero) {

                    }
                });
            },
            //获取应用字典
            GetDict: function (classId) {
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: '/common/v1/BasicData/GetAppBaseDict',
                        method: "get",
                        data: {
                            classId: classId,
                            appKey: "APP20200616102057595"
                        },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            },
            //发货
            sendgoods: function (data, succ) {
                var self = this;
                admin.req({
                    url: self.getbaseurl("Mall.SendGoods"),
                    method: "post",
                    data: data,
                    done: res => {
                        if (res.code == 0) {
                            layer.msg("发货成功!")
                            succ && succ();
                        }
                        else
                            layer.msg("保存失败!")
                    }
                });
            },
        }
        oper.init()
    });
</script>

</html>